<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import { queryTodayTrainErrorStatisticsData } from '@/api/statistics'
import echarts from 'echarts'
//require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import _ from 'lodash'

const animationDuration = 1000
const colors = ['#BF3948', '#F2BD53', '#52BCA9', '#71C25E', '#3087EF']

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
      itemData: [{ id: 'startupCount', name: '发车测试' }, { id: 'completenessCount', name: '完整性测试' }, { id: 'pressureErrorCount', name: '风压报警' }, { id: 'diffSignalErrorCount', name: '差分信号报警' }, { id: 'gpsErrorCount', name: 'GPS时间报警' }, { id: 'callRetryErrorCount', name: '呼叫列尾报警' }, { id: 'speedPulseErrorCount', name: '速度脉冲报警' }, { id: 'systemDetectErrorCount', name: '系统检测报警' }, { id: 'penaltyBrakeErrorCount', name: '惩罚制动报警' }, { id: 'runningCodeErrorCount', name: '故障报警' }]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      queryTodayTrainErrorStatisticsData().then(res => {
        const backendData = res.data
        const categoryList = []
        const valueList = [[], [], []] //二维数组，按等级分3组
        this.itemData.forEach((item, index) => {
          categoryList.push(item.name)
          const value = backendData[item.id] ? backendData[item.id].count : 0
          const lv = backendData[item.id] ? backendData[item.id].level : 0
          _.times(3, function(i) {
            let _i = i + 1
            valueList[i].push({
              lv,
              value: lv == _i ? value : 0,
              itemStyle: {
                color: colors[lv - 1]
              }
            })
          })
        })
        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function(params) {
              let d = params[params[0].data.lv - 1]
              return `<div>
                        <span style="padding:5.5px;border-radius: 100%;display: inline-block;background-color:${d.color};"></span>
                        <span>${d.name}：${d.data.value}</span>
                      </div>`
            }
          },
          grid: {
            top: 35,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            data: ['一级报警', '二级报警', '三级报警'],
            // selectedMode: false,
            textStyle: {
              color: '#fff'
            }
          },
          xAxis: [
            {
              type: 'category',
              data: categoryList,
              axisTick: {
                alignWithLabel: true
              },
              axisLabel: {
                rotate: 45
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisTick: {
                show: false
              },
              max: function(value) {
                return Math.ceil(value.max * 1.5)
              }
            }
          ],
          series: [
            {
              name: '今日报警数',
              type: 'bar',
              stack: 'vistors',
              barWidth: '40%',
              barGap: '-100%',
              // data: valueList,
              animationDuration
            },
            {
              name: '一级报警',
              type: 'bar',
              itemStyle: { color: colors[0] },
              stack: 'vistors',
              barWidth: '40%',
              data: valueList[0],
              animationDuration
            },
            {
              name: '二级报警',
              type: 'bar',
              itemStyle: { color: colors[1] },
              stack: 'vistors',
              barWidth: '40%',
              data: valueList[1],
              animationDuration
            },
            {
              name: '三级报警',
              type: 'bar',
              itemStyle: { color: colors[2] },
              stack: 'vistors',
              barWidth: '40%',
              data: valueList[2],
              animationDuration
            }
          ]
        })
      })
    }
  }
}
</script>
